<%@ page language="java" contentType="text/html; charset="
	pageEncoding="ISO-8859-1"%>
<%@ include file="/WEB-INF/jsp/general/include_head.jsp"%>
<link href="../css/tablas.css" rel="stylesheet" type="text/css" />
<link href="../css/estil_quiniela.css" rel="stylesheet" type="text/css" />
	<script language="javascript">
function selecciona(partit, valor) {
			camp = document.getElementById("p"+partit);

			valor_anterior = camp.value;
			
			switch(valor_anterior) {
				case '0': // buit
					switch(valor) {
						case '1':
							camp.value = '1'; // -> 1
							break;
						case 'X':
							camp.value = '2'; // -> X
							break;
						case '2':
							camp.value = '3'; // -> 2
							break;
					}
					break;
				case '1': // 1
					switch(valor) {
						case '1':
							camp.value = '0'; // -> buit
							break;
						case 'X':
							camp.value = '4'; // -> 1X
							break;
						case '2':
							camp.value = '5'; // -> 12
							break;
					}
					break;
				case '2': // X
					switch(valor) {
						case '1':
							camp.value = '4'; // -> 1X
							break;
						case 'X':
							camp.value = '0'; // -> buit
							break;
						case '2':
							camp.value = '6'; // -> X2
							break;
					}
					break;
				case '3': // 2
					switch(valor) {
						case '1':
							camp.value = '5'; // -> 12
							break;
						case 'X':
							camp.value = '6'; // -> X2
							break;
						case '2':
							camp.value = '0'; // -> buit
							break;
					}
					break;
				case '4': // 1X
					switch(valor) {
						case '1':
							camp.value = '2'; // -> X
							break;
						case 'X':
							camp.value = '1'; // -> 1
							break;
						case '2':
							camp.value = '7'; // -> 1X2
							break;
					}
					break;
				case '5': // 12
					switch(valor) {
						case '1':
							camp.value = '3'; // -> 2
							break;
						case 'X':
							camp.value = '7'; // -> 1X2
							break;
						case '2':
							camp.value = '1'; // -> 1
							break;
					}
					break;
				case '6': // X2
					switch(valor) {
						case '1':
							camp.value = '7'; // -> 1X2
							break;
						case 'X':
							camp.value = '3'; // -> 2
							break;
						case '2':
							camp.value = '2'; // -> X
							break;
					}
					break;
				case '7': // 1X2
					switch(valor) {
						case '1':
							camp.value = '6'; // -> X2
							break;
						case 'X':
							camp.value = '5'; // -> 12
							break;
						case '2':
							camp.value = '4'; // -> 1X
							break;
					}
					break;
			}		
		}
</script>
<script type="text/javascript">  
$(document).ready(function () {  
	$("span[name='pron1']").click(function() {
		if(	$(this).attr('class') == 'c1' )	{
			$(this).removeClass("c1");		
			$(this).addClass("c1_marcat");			
		} else if(	$(this).attr('class') == 'c1_marcat' ) {
			$(this).removeClass("c1_marcat");
			$(this).addClass("c1");
			
		}		
	});
	$("span[name='pronX']").click(function() {		
		if(	$(this).attr('class') == 'cx' )	{
			$(this).removeClass("cx");		
			$(this).addClass("cx_marcat");			
		} else if(	$(this).attr('class') == 'cx_marcat' ) {
			$(this).removeClass("cx_marcat");
			$(this).addClass("cx");
			
		}		
	});
	$("span[name='pron2']").click(function() {		
		if(	$(this).attr('class') == 'c2' )	{
			$(this).removeClass("c2");		
			$(this).addClass("c2_marcat");			
		} else if(	$(this).attr('class') == 'c2_marcat' ) {
			$(this).removeClass("c2_marcat");
			$(this).addClass("c2");
			
		}		
	});
});  
</script>
	
	
</head>
<body>
<div id="CONTAINER">
  <div class="header">
    <%@ include file="/WEB-INF/jsp/gesfutbol/head.jsp"%> 
  </div>
  <div class="izquierda">
    <div class="izq_header" ></div>
	<div class="izq_content">	  		 
		<%@ include file="/WEB-INF/jsp/usuari/menu_penya.jsp"%>			
	 </div>  
	 <div class="izq_footer"></div> 
  </div>
  
  <div class="principal_todo">
  
   <c:set var="colspan" value="${fn:length(penya.combPropies) + fn:length(penya.combGenerals)}"/>
    
	<table class="crearQuiniela">
	<thead>
	  <tr>
		<th>Jornada ${quinielaActiva.numJornadaQuiniela }</th>
		<c:forEach items="${llistatPenyistes}" var="penyistes" varStatus="status">
		  <th scope="col" colspan="${colspan}">${penyistes.usuari.alies }</th>
		</c:forEach>
	  </tr>
	  <tr>
    	<th scope="col">Combinaciones: </th>
    		<c:forEach items="${llistatPenyistes}" var="penyistes" varStatus="status">
		    	<c:forEach items="${penya.combPropies}" var="cPropies" varStatus="status">
					<th scope="col">${cPropies.nom}</th>
				</c:forEach>
				<c:forEach items="${penya.combGenerals}" var="cGenerals" varStatus="status">
					<th scope="col">${cGenerals.nom}</th>
				</c:forEach> 
			</c:forEach>  	
				<th scope="col">Quiniela a validar</th>	    
  		</tr>   
	 </thead> 
	 
	 <tbody>
 	<c:forEach items="${llistatPartits}" var="partits" varStatus="numPartit">
	  <tr>  
		  <th scope="row"><c:out value="${numPartit.count}"></c:out>. ${partits.partit.nomPartit }</th>
			<c:forEach items="${llistatPenyistes}" var="penyista" varStatus="status">										
					<c:forEach items="${penya.combPropies}" var="cPropies" varStatus="status">
						<td  bgcolor="#E9E9E9" style="border:double">
							<c:forEach  items="${penyista.pronostics }" var="pronostic" varStatus="status">
								<c:if test="${pronostic.partitDeQuiniela.idPartitDeQuiniela eq partits.idPartitDeQuiniela }">
									<c:if test="${pronostic.combinacioPropia.idCombinacioPropia eq cPropies.idCombinacioPropia }">
										
											<c:if test="${pronostic.un == true}">1</c:if>
											<c:if test="${pronostic.ix == true}">X</c:if>
											<c:if test="${pronostic.dos == true}">2</c:if>
             									
									</c:if>
								</c:if>
							</c:forEach>
						</td>	
						</c:forEach>							
					<c:forEach items="${penya.combGenerals}" var="cGenerals" varStatus="status">
					<td  bgcolor="#F5F5F5" style="border:double">
						<c:forEach  items="${penyista.pronostics }" var="pronostic" varStatus="status">
							<c:if test="${pronostic.partitDeQuiniela.idPartitDeQuiniela eq partits.idPartitDeQuiniela }">
								<c:if test="${pronostic.combinacioGeneral.idCombinacioGeneral eq cGenerals.idCombinacioGeneral }">
									
											<c:if test="${pronostic.un == true}">1</c:if>
											<c:if test="${pronostic.ix == true}">X</c:if>
											<c:if test="${pronostic.dos == true}">2</c:if>
             									
								</c:if>
							</c:if>
						</c:forEach>
					</td>
					</c:forEach>
				</c:forEach>
				<td>					
					<span class="c1" name="pron1" onclick="Javascript:selecciona(${numPartit.count},'1')">&nbsp;&nbsp;&nbsp;</span>                
         			<span class="cx" name="pronX" onclick="Javascript:selecciona(${numPartit.count},'X')">&nbsp;&nbsp;&nbsp;</span>
        			<span class="c2" name="pron2" onclick="Javascript:selecciona(${numPartit.count},'2')">&nbsp;&nbsp;&nbsp;</span>
        		</td>			 
	  	</tr>
	</c:forEach>
	</tbody>
	</table>
	
			<form:form action="savePronostics.htm" commandName="pronostics">	
			<spring-tags:bind path="p1">
				<input type="hidden" id="p1" name="p1" value="0">
			</spring-tags:bind>
			<spring-tags:bind path="p2">
				<input type="hidden" id="p2" name="p2" value="0">
			</spring-tags:bind>
			<spring-tags:bind path="p3">
				<input type="hidden" id="p3" name="p3" value="0">
			</spring-tags:bind>
			<spring-tags:bind path="p4">
				<input type="hidden" id="p4" name="p4" value="0">
			</spring-tags:bind>	
			<spring-tags:bind path="p5">
				<input type="hidden" id="p5" name="p5" value="0">
			</spring-tags:bind>	
			<spring-tags:bind path="p6">
				<input type="hidden" id="p6" name="p6" value="0">
			</spring-tags:bind>	
			<spring-tags:bind path="p7">
				<input type="hidden" id="p7" name="p7" value="0">
			</spring-tags:bind>	
			<spring-tags:bind path="p8">
				<input type="hidden" id="p8" name="p8" value="0">
			</spring-tags:bind>	
			<spring-tags:bind path="p9">
				<input type="hidden" id="p9" name="p9" value="0">
			</spring-tags:bind>	
			<spring-tags:bind path="p10">
				<input type="hidden" id="p10" name="p10" value="0">
			</spring-tags:bind>	
			<spring-tags:bind path="p11">
				<input type="hidden" id="p11" name="p11" value="0">
			</spring-tags:bind>	
			<spring-tags:bind path="p12">
				<input type="hidden" id="p12" name="p12" value="0">
			</spring-tags:bind>	
			<spring-tags:bind path="p13">
				<input type="hidden" id="p13" name="p13" value="0">
			</spring-tags:bind>	
			<spring-tags:bind path="p14">
				<input type="hidden" id="p14" name="p14" value="0">
			</spring-tags:bind>	
			<spring-tags:bind path="p15">
				<input type="hidden" id="p15" name="p15" value="0">
			</spring-tags:bind>	
			<spring-tags:bind path="tipusCombinacio">
				<input type="hidden" name="tipusCombinacio" value="null">
			</spring-tags:bind>
			
			<c:if test="${tipusCombinacio == 'Propia'}" >
				<spring-tags:bind path="idCombinacioPropia">
					<input type="hidden" name="idCombinacioPropia" value="null">
				</spring-tags:bind>
			</c:if>
			
			<c:if test="${tipusCombinacio == 'General'}" >
				<spring-tags:bind path="idCombinacioGeneral">
					<input type="hidden" name="idCombinacioGeneral" value="null">
				</spring-tags:bind>
			</c:if>
			
			<spring-tags:bind path="aliesPenyista">
				<input type="hidden" name="aliesPenyista" value="<sec:authentication property="principal.username" />">
			</spring-tags:bind>
			<input type="submit" value="Guardar"/>
		</form:form>
	
	
</div>
	
	<div class="footer">
		<h6>
			<fmt:message key="copyright" />
		</h6>
	</div>
</div>
</body>
</html>
